<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>意见管理</el-breadcrumb-item>
      <el-breadcrumb-item>意见列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="margintop20">
      <el-col>
        <el-table
          :data="tableList.slice((page-1)*pageSize,pageSize*page)"
          style="width: 100%"
          class="tableinfo margintop20"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          stripe
        >
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="意见人" prop="username"></el-table-column>
          <el-table-column label="发布时间" prop="time" sortable>
            <template slot-scope="scope">{{scope.row.time | timeFormat('YY-MM-DD HH:mm')}}</template>
          </el-table-column>
          <el-table-column label="意见标题" prop="title">
            <template slot-scope="scope">{{scope.row.title}}</template>
          </el-table-column>
          <el-table-column label="意见内容" :show-overflow-tooltip="true" prop="content" width="350">
            <template slot-scope="scope">
              <el-popover placement="top-start" title="意见内容:" width="350" trigger="hover">
                <div v-html="scope.row.content"></div>
                <span slot="reference" v-html=" scope.row.content"></span>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="意见分类" prop="category">
            <template slot-scope="scope">
              <el-tag
                :type="colors[i]"
                v-for="(item,i) in scope.row.category"
                :key="i"
                size="mini"
              >{{item}}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="warning" @click="replayadviseone(scope.row)">回复</el-button>
              <el-button
                @click="editAdvise(scope.row)"
                v-if="scope.row.mobile==mobile"
                size="mini"
                type="success"
              >编辑</el-button>
              
              <el-popconfirm
                v-if="scope.row.mobile==mobile"
                confirmButtonText="好的"
                cancelButtonText="不用了"
                icon="el-icon-info"
                iconColor="red"
                title="你确定要删除吗？"
                @onConfirm="delAdviseOne(scope.row)"
              >
                <el-button size="mini" slot="reference" type="danger">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div class="flexbox">
          <el-pagination
            background
            layout="prev, pager, next"
            @current-change="changeCurrent"
            :page-size="pageSize"
            :current-page="page"
            :total="total"
          ></el-pagination>
          <span>共 {{total}} 条数据</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>


<script>
import { getadviselist, delAdviseOne } from "@/api";
const colors = ["success", "primary", "danger", "warning", "info"];
export default {
  data() {
    return {
      pageSize: 6,
      page: 1,
      tableList: [],
      colors,
      mobile: localStorage.getItem("mobile"),
    };
  },
  computed: {
    total() {
      return this.tableList.length;
    },
  },
  methods: {
    changeCurrent(page) {
      this.page = page;
    },
    replayadviseone(row) {
        this.$router.push({name:'advisereply',params:{id:row._id}})
    },
    editAdvise(row) {
      this.$router.push({name:'adviseedit',params:{id:row._id}})
    },
    delAdviseOne(row) {
      delAdviseOne({ _id: row._id }).then((res) => {
        if (res.type) {
          this.tableList = this.tableList.filter((item) => item._id != row._id);
        }
      });
    },
  },
  mounted() {
    getadviselist().then((res) => {
      if (res.type) {
        console.log(res.result);
        this.$nextTick(() => {
          this.tableList = res.result;
        });
      }
    });
  },
};
</script>